<template>
  <div>
    <button @click="com = 'UserAccount'">显示用户账号组件</button>
    |
    <button @click="com = 'UserInfo'">显示用户信息组件</button>
    <!-- 动态组件: component -->
    <!-- 解决的问题: 在同一个地方, 多个组件切换显示 -->
    <!-- 通过 is 来指定组件名称即可实现切换 -->
    <component :is="com"></component>
  </div>
</template>

<script>
import UserAccount from './components/UserAccount.vue'
import UserInfo from './components/UserInfo.vue'
export default {
  components: {
    UserAccount,
    UserInfo
  },
  data() {
    return {
      com: ''
    }
  }
}
</script>